<template>
        <div id="container">
        </div>
</template>

<script>
        import AMapLoader from '@amap/amap-jsapi-loader'
        import bus from '@/bus/bus'

        window._AMapSecurityConfig = {
                securityJsCode: '81b6ca152bdbb0fee770f6e592b36f77'
        };
        export default {
                data() {
                        return {
                                map: null,
                                infoWindow: null
                        }
                },
                methods: {
                        initMap() {
                                AMapLoader.load({
                                        key: "d941aa6ec669f7f70489828022b4dd79",
                                        version: "2.0",
                                        plugins: ['AMap.Geocoder'],
                                })

                                        .then(AMap => {
                                                this.map = new AMap.Map("container", {
                                                        viewMode: "3D",
                                                        zoom: 10,
                                                        center: [112.432825, 39.331595],
                                                        mapStyle: "amap://styles/darkblue",
                                                });

                                                this.map.on('click', e => {
                                                        let lat = e.lnglat.lat;
                                                        let lng = e.lnglat.lng;
                                                        this.getLngLatService(lat, lng);
                                                });
                                        })
                                        .catch(e => {
                                                console.log(e)
                                        })
                        },

                        getLngLatService(lat, lng) {
                                let pos = [lng, lat];
                                let lnglat = new AMap.LngLat(lng, lat);
                                let geocoder = new AMap.Geocoder({
                                        radius: 1000,
                                        extensions: 'all'
                                });
                                console.log(lat);
                                console.log(lng);
                                let Geocoder = new AMap.Geocoder({
                                        city: '全国'
                                });

                                let marker = new AMap.Marker({
                                        position: new AMap.LngLat(lng, lat),
                                        offset: new AMap.Pixel(0, 0),
                                        zoom: 18
                                });

                                this.map.add(marker);

                                let address = '';

                                geocoder.getAddress(lnglat, (status, result) => {
                                        if (status === 'complete' && result.regeocode) {
                                                address = result.regeocode.formattedAddress;
                                                let res = {
                                                        pos: pos,
                                                        address: address
                                                };
                                                bus.$emit('shareAddressDetails', res)
                                        } else {
                                                log.error('根据经纬度查询地址失败')
                                        }
                                });
                        }
                },
                mounted() {
                        this.initMap();
                },
        }
</script>


<style lang="less" scoped>
        #container {
                padding: 0px;
                margin: 0px;
                width: 100%;
                height: 100%;
        }

</style>

